<template>
	<!-- 歌曲播放 -->
	<view class="MusicPlay">

		<view class="content">
			<!-- 图片封面 -->
			<view class="cover flex-center">
				<image :src="SongImgUrl" @error="SongImgUrl='/static/errors.jpg'" mode="aspectFit"></image>
			</view>
			<!-- 标题 -->
			<view class="titleBar">
				<view>{{SongInfo.extras.name}}</view>
				<view>{{SongInfo.extras.subtitle}}</view>
				<view>{{SongInfo.track_info.singer[0].name}}</view>
			</view>

			<!-- 控制面板 -->
			<view class="control">
				<view>
					<span @click="cutIconfont" class="iconfont" :class="iconFontLIst[iconFontIndex]"></span>
					<span @click="toLyric" class="iconfont icon-lrc"></span>
					<span @click="hint"><uni-icons type="list" size="30"></uni-icons></span>
				</view>
				<view>
					{{formatTime(player.currentTime)}}
					<slider @change="sliderChange" :value="player.currentTime/player.duration*100" step="1" />
					{{formatTime(player.duration)}}
				</view>
				<view>
					<span class="iconfont icon-xiayishou1"></span>
					<view @click="player.AudioPlay(innerAudioContext)">
						<span :style="player.isPlay?'':'padding-left: 5%;'" class="iconfont"
							:class="player.isPlay?'icon-zanting':'icon-bofang'"></span>
					</view>
					<span class="iconfont icon-xiayishou" @click="next"></span>
				</view>
			</view>
		</view>

		<SongMenu ref="songMenup"></SongMenu>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		computed,
		ref,
		reactive
	} from "vue";
	import {
		GetSongInfo,
		GetImageUrl
	} from "@/utils/MusicAPI.js"
	const songMenup = ref()
	const hint = () => {
		songMenup.value.popup.open()
	}
	// 跳转歌词页
	const toLyric = () => {
		uni.navigateTo({
			url: "/pages/Lyric/Lyric"
		})
	}

	//存放图标列表
	const iconFontLIst = ["icon-xunhuanbofang", "icon-suijibofang", "icon-shunxubofang"]
	//当前图标的下标
	const iconFontIndex = ref(0)
	//切换图标
	const cutIconfont = () => {
		iconFontIndex.value = iconFontIndex.value >= iconFontLIst.length - 1 ? 0 : iconFontIndex.value + 1;
		let title = "切换成功"
		if (iconFontIndex.value == 0) {
			title = "已切换到单曲循环模式"
		} else if (iconFontIndex.value == 1) {
			title = "已切换到随机播放模式"
		} else if (iconFontIndex.value == 2) {
			title = "已切换到列表循环模式"
		}
		uni.showToast({
			icon: "none",
			title: title
		})
	}

	//进度条拖拽
	const sliderChange = (e) => {
		const time = player.value.duration / 100 * e.detail.value
		innerAudioContext.seek(time)
		innerAudioContext.play()
	}

	//存放播放链接 和 音乐id
	const data = getApp().globalData.data
	const player = getApp().globalData.player
	const innerAudioContext = getApp().globalData.innerAudioContext
	const formatTime = getApp().globalData.formatTime
	onLoad(() => {
		getSongInfo(data.value.songmid)
		if (innerAudioContext.src != data.value.playUrl) {
			innerAudioContext.src = data.value.playUrl
		}
		innerAudioContext.play()
	})

	// 存放歌曲相关信息
	const SongInfo = ref({
		extras: {
			name: "-",
			subtitle: "-",
		},
		track_info: {
			singer: [{
				name: ""
			}]
		}

	})
	//获取歌曲相关信息
	const getSongInfo = (songmid) => {
		GetSongInfo(songmid).then(res => {
			SongInfo.value = res.data.response.songinfo.data
			const pmid = res.data.response.songinfo.data.track_info.album.mid
			getImageUrl(pmid)
		}).catch(err => {
			console.log("获取歌曲相关信息错误", err)
		})
	}
	const SongImgUrl = ref("")
	//获取歌曲 + 专辑 图片
	const getImageUrl = (pmid) => {
		GetImageUrl(pmid).then(res => {
			SongImgUrl.value = res.data.response.data.imageUrl
			data.value.name = SongInfo.value.extras.name
			data.value.imageUrl = SongImgUrl.value
			uni.setStorage({
				key: "MusicUrl",
				data: data.value
			})
		}).catch(err => {
			console.log("获取歌曲相关信息错误", err)
		})
	}
	
	const next=()=>{
		console.log(uni.getStorageSync("MusicUrl"))
		console.log(getApp().globalData.songlist)
	}
</script>

<style scoped>
	body,
	page {
		background-color: #1b1b25;
	}

	view {
		box-sizing: border-box;
	}

	.content {
		position: absolute;
		bottom: 0;
		width: 98%;
		left: 1%;
		padding: 50% 20px 0 20px;
		border-radius: 30px 30px 0 0;
		height: 75%;
		background-color: white;
		text-align: center;
		color: #000;
		box-shadow: 0 0px 5px 2px blueviolet;
	}

	.cover {
		position: absolute;
		top: -25%;
		left: 15%;
		width: 70%;
		aspect-ratio: 1/1;
		z-index: 1;
		border-radius: 10px;
		box-shadow: 0 2px 5px 1px #7d7daa;
		overflow: hidden;
	}

	.cover>image {
		width: 100%;
		height: 100%;
		background-color: #686868;
	}

	.titleBar {
		padding-bottom: 20rpx;
	}

	.titleBar view:nth-child(1) {
		font-weight: bold;
	}

	.titleBar view:nth-child(2) {
		color: #686868;
		margin: 1em 0;
	}

	.titleBar view:nth-child(3) {
		color: #686868;
	}


	.control>view {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 20rpx auto;

	}

	.control>view:nth-child(1) {
		width: 50%;
		display: grid;
		grid-template-columns: repeat(3, 30%);
	}



	.control>view:nth-child(1) span {
		font-size: 1.5em;
		color: #333333;
	}

	.control>view:nth-child(2) {
		font-size: 0.8em;
	}

	.control>view:nth-child(2) slider {
		width: 80%;
	}

	.control>view:nth-child(3)>view:nth-child(2) {
		color: white;
		width: 100rpx;
		line-height: 100rpx;
		border-radius: 100rpx;
		text-align: center;
		aspect-ratio: 1/1;
		background-color: black;
		overflow: hidden;
	}
</style>